//参观预约 3个步骤 的js代码  2018-01-11  by lxx 814878176@qq.com

mui.init();

// ------------------------验证数据, 提交数据 -------------------- Begin
var submitBtn = mui('.submit-btn')[0];  //提交按钮
//提交按钮点击事件
submitBtn.onclick = function(){
	var params = testParam(); 
	if(params){
		params.service_id = "my_booking.bookVisit";
		postRequest(params,getBookVisit);
	}
}
/**
 * post请求成功后执行的回调行数
 * @param {Object} result  请求后返回的结果
 */
function getBookVisit(result){
	console.log(result);
	//获取到返回的结果,跳转到预约结果页面
	if(result.stateCode==0){
//		var params = result.data;
		var params = result;
		params = JSON.stringify(params); //将json对象转换成json对符串 
		localStorage.setItem("params", params);
		window.location.href = "/mars-wxclient/visit-result.html?id=1";
	}
	
	if(result.stateCode==121){
		console.log(result.message);
		mui.alert(result.message, ' ', function(){});
	}
}
//获取数据 并验证字段
function testParam(){
	var params = {};
	var noBlank = true;   //记录是否存在空的字段  true为不存在,false为存在空的
	var stepNo = 0;   //声明一个变量,记录靠最前的为空的字段的位置 (0,1,2分别对应流程条)
	var linkman = mui("#linkman")[0]; // 预约人姓名
	var phone = mui("#phone")[0]; // 预约人手机号
	var holdOrg = mui("#holdOrg")[0]; // 发起单位
	var visitDate = mui("#visitDate")[0]; // 参观日期
	var visitTime = mui("#visitTime")[0]; // 参观时间
	var visitOrg = mui("#visitOrg")[0]; // 参观单位
	var peopleNum = mui("#peopleNum")[0]; // 参观人数
	var topLeader = mui("#topLeader")[0]; // 最高领导级别
	var industryType = mui("#industryType")[0]; // 行业类别
	var isIntro = getRadioVal("isIntro"); // 讲解服务的值 : 1-需要 2-不需要
	var wordType = getRadioVal("wordType"); // 欢迎词类型 : 1-默认 2-自定义
	var welcomeWord = mui("#welcomeWord")[0];  //欢迎词-自定义的时候才输入
	var visitPoint = getCheckboxVal("visitPoint"); // 参观重点-数组
	var visitWay = getCheckboxVal("visitWay");  // 参观类型
	var isPark = getRadioVal("isPark");  // 停车服务
	
	var phoneReg= /^1[3|4|5|7|8][0-9]{9}$/; // 手机号正则
	
	//预约人姓名
	var linkmanVal = setParam(linkman,0);
	if(linkmanVal){
		params.linkman = linkmanVal;
	}else{
		noBlank = false;
	}
	
	//预约人手机号
	if(phone.value == null || phone.value.replace(/(^\s*)|(\s*$)/g, "") == ''){
		$(phone.parentNode).addClass("is-blank");
		var phoneTips = mui(".phone-tips")[0];
		$(phoneTips).html("☀ 请填写预约人手机号");
		stepNo = 0;
		step = step>stepNo? stepNo:step;
		noBlank = false;
	}else {
		$(phone.parentNode).removeClass("is-blank");
		if(!phoneReg.test(phone.value)){
			$(phone.parentNode).addClass("is-blank");
			var phoneTips = mui(".phone-tips")[0];
			$(phoneTips).html("☀ 请填写正确的手机号");
			stepNo = 0;
			step = step>stepNo? stepNo:step;
			noBlank = false;
		}else{
			params.phone = phone.value;
		}
	}
	
	//发起单位
	var holdOrgVal = setParam(holdOrg,1);
	if(holdOrgVal){
		params.holdOrg = holdOrgVal;
	}else{
		noBlank = false;
	}
	
	//参观日期
	var visitDateVal = setParam(visitDate,1);
	if(visitDateVal){
		params.visitDate = visitDateVal;
	}else{
		noBlank = false;
	}
	
	//参观时间
	var visitTimeVal = setParam(visitTime,1);
	if(visitTimeVal){
		params.visitTime = visitTimeVal;
	}else{
		noBlank = false;
	}
	
	//参观单位
	var visitOrgVal = setParam(visitOrg,1);
	if(visitOrgVal){
		params.visitOrg = visitOrgVal;
	}else{
		noBlank = false;
	}
	
	//参观人数
	var peopleNumVal = setParam(peopleNum,1);
	if(peopleNumVal){
		params.peopleNum = peopleNumVal;
	}else{
		noBlank = false;
	}
	
	//最高领导级别
	var topLeaderVal = setParam(topLeader,1);
	if(topLeaderVal){
		params.topLeader = topLeaderVal;
	}else{
		noBlank = false;
	}
	
	//行业类别
	var industryTypeVal = setParam(industryType,1);
	if(topLeaderVal){
		params.industryType = industryTypeVal;
	}else{
		noBlank = false;
	}
	
	//讲解服务
	params.isIntro = isIntro;   //1-需要 2-不需要
	
	//欢迎词类型类型及欢迎词内容
	params.wordType = wordType;
	var welcomeWordVal = setParam(welcomeWord,2);
	if(welcomeWordVal){
		params.welcomeWord = welcomeWordVal;
	}else{
		noBlank = false;
	}
	
	//参观重点  visitPoints
	var $visitPoint = $("#visitPoint");
	if(visitPoint.length==0){
		$visitPoint.addClass("is-blank");
		stepNo = 2;
		step = step>stepNo? stepNo:step;
		noBlank = false;
	}else{
		$visitPoint.removeClass("is-blank");
		params.visitPoint = visitPoint.join(";");
	}
	
	//参观类型  visitWay
	var $visitWay = $("#visitWay");
	if(visitWay.length==0){
		$visitWay.addClass("is-blank");
		stepNo = 2;
		step = step>stepNo? stepNo:step;
		noBlank = false;
	}else{
		$visitWay.removeClass("is-blank");
		params.visitWay = visitWay.join(";");
	}
	
	//判断是否需要停车服务  1-需要 2-不需要
	var $carWrapper = $(".car-nums-wrapper");  //车牌号列表容器
	params.isPark = isPark;
	if(isPark==1){
		var cardNoRs = getCarNums();   //获取车牌号列表返回的是一个数组,第一个元素是车牌号数组,第二个元素是车牌号是都存在空
		var cardNoArr = cardNoRs[0];  // 车牌号列表
		var isCardNoBlank = cardNoRs[1];  // 车牌号输入框是否存在空  true为空
		if(isCardNoBlank){
			$carWrapper.addClass("is-blank");
			stepNo = 2;
			step = step>stepNo? stepNo:step;
			noBlank = false;
		}else{
			$carWrapper.removeClass("is-blank");
			params.cardNo = cardNoArr.join(";");
		}
	}else{
		$carWrapper.removeClass("is-blank");
		//不需要停车服务时,暂时传这个参数"no"
		params.cardNo = "no";
	}
	
	if(noBlank){
		//当所有字段验证通过的时候返回数据
		return params;
	}else {
		changeSteps(step);   //存在空的,跳到对应的流程内容块
		return false;
	}
}

/**
 * 判断输入框的值是否为空,不为空则获取其对应的值
 * @param {Object} obj     输入框元素
 * @param {Object} stepNo    当前输入框所属的步骤  0,1,2
 * return  如果为空则返回false(然后传给noBlank),否则返回当前输入框的值
 */
function setParam(obj,stepNo){
	if(obj.value == null || obj.value.replace(/(^\s*)|(\s*$)/g, "") == ''){
		$(obj.parentNode).addClass("is-blank");  //如果为空则给当前元素的父元素添加类名"is-blank"
		step = step>stepNo? stepNo:step;
		return false;
	}else {
		$(obj.parentNode).removeClass("is-blank");  //不为空的时候移除类名"is-blank"
		return $(obj).val();
	}
}
// ------------验证数据, 提交数据 ------------End

//----------------------流程切换-上一步下一步操作---------------Begin
var step = 0;  //记录流程当前的步数0,1,2,...  默认是第一步是0
var banner = mui(".banner")[0];   //第一步流程的头部banner
var navs = mui(".navs li");   //流程条(三个li标签)
var contentsWrapper = mui(".contents")[0];   //流程内容容器
var contents = mui(".contents li");   //流程内容(三个li标签)
var submitBtn = mui(".submit-btn")[0]; //提交按钮
var nextBtn = mui(".next-btn")[0];   //下一步按钮
var preBtn = mui(".pre-btn")[0];     //上一步按钮

changeSteps(step);  //初始化当前流程

//下一步绑定点击事件
nextBtn.addEventListener("click",function(){
	var noBlank = true;   //记录是否存在空的字段  true为不存在,false为存在空的
	if(step==0){
		var phone = mui("#phone")[0]; // 预约人手机号
		var phoneReg= /^1[3|4|5|7|8][0-9]{9}$/; // 手机号正则
		//预约人手机号
		if(phone.value == null || phone.value.replace(/(^\s*)|(\s*$)/g, "") == ''){
			$(phone.parentNode).addClass("is-blank");
			var phoneTips = mui(".phone-tips")[0];
			$(phoneTips).html("☀ 请填写预约人手机号");
			noBlank = false;
		}else {
			$(phone.parentNode).removeClass("is-blank");
			if(!phoneReg.test(phone.value)){
				$(phone.parentNode).addClass("is-blank");
				var phoneTips = mui(".phone-tips")[0];
				$(phoneTips).html("☀ 请填写正确的手机号");
				noBlank = false;
			}
		}
	}
	if(step<2 && noBlank){
		step++;
		changeSteps(step);
	}
})
//上一步按钮绑定点击事件
preBtn.addEventListener("click",function(){
	if(step>0){
		step--;
		changeSteps(step);
	}
})
//流程条及内容改变的样式切换
function changeSteps(index){
	for(var i=0;i<navs.length;i++){
		$(navs[i]).removeClass("active");
		$(contents[i]).removeClass("active");
	}
	$(navs[index]).addClass("active");
	$(contents[index]).addClass("active");
	
	if(index==0){
		banner.style.display = "block";
		submitBtn.style.display = "none";
		nextBtn.style.display = "inline-block";
		preBtn.style.display = "none";
		contentsWrapper.style.paddingBottom = "2.25rem";  //这里是只有一个点击按钮时的高度,撑起来以防被遮盖内容
	}else if(index==1){
		banner.style.display = "none";
		submitBtn.style.display = "none";
		nextBtn.style.display = "inline-block";
		preBtn.style.display = "inline-block";
		contentsWrapper.style.paddingBottom = "3.6875rem";  //这里是有两个点击按钮时的高度,撑起来以防被遮盖内容
	}else if(index==2){
		banner.style.display = "none";
		submitBtn.style.display = "inline-block";
		nextBtn.style.display = "none";
		preBtn.style.display = "inline-block";
		contentsWrapper.style.paddingBottom = "3.6875rem";  //这里是有两个点击按钮时的高度,撑起来以防被遮盖内容
	}
}
//--------流程切换-上一步下一步操作-----End

// -----------------------参观日期选择------------------------Begin
//var visitDate = mui("#visitDate")[0];
//visitDate.addEventListener('tap', function() {
//	var dates = new Date();
//	var year = dates.getFullYear();
//	var month = dates.getMonth();
//	var day = dates.getDate();
//	var dtpicker = new mui.DtPicker({
//	    type: "date",   //设置日历初始视图模式 
//	    beginDate: new Date(year, month, day),//设置开始日期 
//	    //endDate: new Date(2020, 04, 25)    //设置结束日期 
//	}) 
//	dtpicker.show(function(rs) {
//	    visitDate.value = rs.text;
//	}) 
//}, false);

//my97datePicker 日期插件
var dateVal = ""; 
WdatePicker({eCont:'datepicker',disabledDays:[0,6],minDate:'%y-%M-{%d+1}',onpicked:function(dp){
   		dateVal = dp.cal.getDateStr();
 	}
});
$("#visitDate").click(function(){
	document.activeElement.blur();
	mui('#datePopover').popover('toggle');
})
$(".cancel-btn").click(function(){
	mui('#datePopover').popover('toggle');
})
$(".confirm-btn").click(function(){
	mui('#datePopover').popover('toggle');
	$("#visitDate").val(dateVal);
})
// ------参观日期选择-------------End

// -----------------------参观时间选择------------------------Begin
//请求接口获得时间段数据
var timeParam = {
	"service_id": "my_booking.getCanBookTime"
};
var timeArr = [];
//请求接口获取数据
postRequest(timeParam,setTimes);
function setTimes(result){
//	console.log(result.data);
	var params = result.data;
	if(!params){
		return;
	}
	for(var i=0;i<params.length;i++){
		var param = {};
		param.value = i;
		param.text = params[i];
		timeArr.push(param);
	}
	//时间段选择器
	var visitTime = new mui.PopPicker();
	visitTime.setData(timeArr);
	var visitTimeBtn = mui('#visitTime')[0];
	visitTimeBtn.addEventListener('tap', function(event) {
		visitTime.show(function(items) {
			visitTimeBtn.value = items[0].text;
			//返回 false 可以阻止选择框的关闭
			//return false;
		});
	}, false);
}

// ------参观时间选择-------------End

// -----------------------行业类别选择------------------------Begin
var industryArrs = ["IT科技","金融业","餐饮","酒店旅游","运输与仓储","教育",
"政府与公共事业","医药护理","交通工具","房地产","消费品","商业服务","文体娱乐","印刷","其它"];
var industryTypeArr = [];
for(var i=0;i<industryArrs.length;i++){
	var industryArr = {};
	industryArr.value = i;
	industryArr.text = industryArrs[i];
	industryTypeArr.push(industryArr);
}
var industryType = new mui.PopPicker();
industryType.setData(industryTypeArr);
var industryTypeBtn = mui('#industryType')[0];
industryTypeBtn.addEventListener('tap', function(event) {
	industryType.show(function(items) {
		industryTypeBtn.value = items[0].text;
		//返回 false 可以阻止选择框的关闭
		//return false;
	});
}, false);
// ------行业类别选择-------------End

// -------------------------欢迎词类型切换-----------------------Begin
var wordTypes = document.getElementsByName("wordType");   //欢迎词类型-单选
var $welcomeWord = $("#welcomeWord");  //欢迎词输入框
var welcomeWord = "";  //记录已输入的自定义欢迎词,保证在欢迎词类型切换的时候不会清空输入框
$welcomeWord.val("热烈欢迎各位领导嘉宾莅临参观指导!");  //初始化默认的欢迎词
for(var i=0; i<wordTypes.length; i ++){
	wordTypes[i].index = i;
	wordTypes[i].onclick = function(){
		var wordTypeVal = $(wordTypes[this.index]).val();  //获取当前选中的值
		if(!$welcomeWord.attr("readonly")){
			welcomeWord = $welcomeWord.val();
		}
		//欢迎词类型判断   wordTypeVal 1-默认,2-自定义
		if(wordTypeVal==1){
			$welcomeWord.val("热烈欢迎各位领导嘉宾莅临参观指导!");
			$welcomeWord.attr("readonly","readonly");
		}else{
			$welcomeWord.val(welcomeWord);
			$welcomeWord.removeAttr("readonly");  
		}
	}
}
// ------欢迎词类型切换-------------End


//----------------------是否需要停车服务单选点击事件-------------------Begin
var carNumsWrapper = mui(".car-nums-wrapper")[0];  //车牌号容器
var showCarNums = document.getElementsByName("isPark");  //单选按钮
var showCarValue = "2";   //这个后期是后台接口返回的值--是否需要停车服务标识
for(var i=0; i<showCarNums.length; i ++){
	//初始化显示是否需要停车服务   1-需要 2-不需要
	if(showCarValue == 2){
	    showCarNums[1].checked =  'checked';  
	    carNumsWrapper.style.display = "none";
	}else{
		showCarNums[0].checked =  'checked';  
		carNumsWrapper.style.display = "flex"; 
	}
	
	showCarNums[i].onclick = function(){
		$(carNumsWrapper).removeClass("is-blank");
		showCarValue = this.value;   //点击后更新是否需要停车服务标识
		//需要停车的时候显示车牌号列表,否则隐藏
		if(this.value==1){
	        carNumsWrapper.style.display = "flex";  //这里要和css里面的一样
	    }else {
	    	carNumsWrapper.style.display = "none";
	    }
	}
}


//-----是否需要停车服务单选点击事件-------End

// ---------------------------- 车牌号列表操作 --------------------Begin
var carNums = mui(".car-nums")[0];   //车牌号列表
var addBtn = mui(".car-num .icon-tianjia")[0];  //添加车牌号按钮
var index = 0;   //记录点击的车牌选择按钮索引

provinceUnit();  //初始化车牌地址弹出层数据
carNumsUnit();   //初始化车牌号列表

//添加车牌号按钮点击事件
addBtn.onclick = function(){
	var div=document.createElement("div");
	div.className="car-num";
	div.innerHTML =  '<a href="javascript:;" class="selects">'+
						'<span class="addr">粤</span>'+
						'<i class="icon iconfont icon-sanjiao"></i>'+
					'</a>'+
					'<input type="text" name="" class="num" value="" placeholder="请输入车牌号" />'+
					'<i class="icon iconfont icon-jianshao"></i>';
	carNums.appendChild(div);
	
	carNumsUnit();  //添加一个要初始化车牌号列表
}
/**
 * 初始化车牌地址弹出层数据
 */
function provinceUnit(){
	var provinces = new Array("京","沪","浙","苏","粤","鲁","晋","冀",
            "豫","川","渝","辽","吉","黑","皖","鄂",
            "津","贵","云","桂","琼","青","新","藏",
            "蒙","宁","甘","陕","闽","赣","湘");
	
	var provinceList = mui(".mui-table-view")[0];  //列表容器
	var listHtml = [];  //列表内容  li标签
	for(var i=0;i<provinces.length;i++){
		var str = '<li><span>' + provinces[i] + '</span></li>';
		listHtml.push(str);
	}
	provinceList.innerHTML = listHtml.join(",");  //拼接数据
	//点击取消事件   mui-btn
	mui("#province .mui-btn")[0].onclick = function(){
		mui('#province').popover('toggle');
	}
	//选择车牌地区点击事件
	var provs = mui("#province li span");
	for(var i=0;i<provs.length;i++){
		provs[i].onclick = function(){
			mui(".selects .addr")[index].innerHTML = this.innerHTML;   // 更新车牌号的地区
			mui('#province').popover('toggle');  //隐藏切换弹出层
		}
	}
}

/**
 * 初始化车牌号列表--因为增加删除都会改变车牌号列表的结构(index)
 */
function carNumsUnit(){
	var selects = mui(".car-num .selects");  //点击车牌选择按钮
	var delBtn = mui(".car-num .icon-jianshao");  //删除车牌号按钮
	for(var i=0;i<selects.length;i++){
		selects[i].index = i;
		//车牌选择按钮点击事件
		selects[i].onclick = function(){
			mui('#province').popover('toggle');
			index = this.index;  //记录当前点击的车牌选择按钮索引
		}
		//删除按钮从第二个车牌号才开始有的
		if(i>0){
			delBtn[i-1].onclick = function(){
				carNums.removeChild(this.parentNode);
				carNumsUnit();  //删除一个要初始化车牌号列表
			}
		}
	}
}

/**
 * 获取车牌号列表的车牌号
 * 返回值 arr[0] -- 拼接后的车牌号数组
 * 返回值 arr[1] -- 添加的车牌号是否存在空的--false为不空,true为空
 */
function getCarNums(){
	var carNumsList = mui(".car-nums .car-num");  //车牌号列表
	var carAddrList = mui(".car-nums .car-num .addr");  //车牌号地区
	var numList = mui(".car-nums .car-num .num");   //车牌号输入框内容
	var cardNoArr = [];   //存放处理后的车牌号字符串的数组
	var isBlank = false;   
	for(var i=0;i<carNumsList.length;i++){
		if(numList[i].value==""){
			isBlank = true;
		}
		var cardNo = carAddrList[i].innerHTML+numList[i].value;
		cardNoArr.push(cardNo);
	}
	return [cardNoArr,isBlank];
}

// ----- 车牌号列表操作 ---------End

